<!DOCTYPE html>
<HTML>

<HEAD>
	<TITLE> Widget DEMO </TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap5@1.1.9/src/css/bootstrap.min.css">
	<link href='/css/style.css' rel='stylesheet' type='text/css'>
	<link href='dragula/dist/dragula.min.css' rel='stylesheet' type='text/css'>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap5@1.1.9/src/js/bootstrap.bundle.min.js"></script>
	<script src="dragula/dist/dragula.min.js"></script>
	<SCRIPT type="module" LANGUAGE="JavaScript">
		import { HTMLWidget, ImageWidget, TextWidget, TODOWidget, TableWidget, MarkdownWidget } from "./widget.js"
		$().ready(function () {
			dragula([document.querySelector('#left')], {
				//dragula([document.querySelector('#left'), document.querySelector('#right')], {
				moves: function (el, container, handle) {
					return handle.classList.contains('drag-handler');
				}
			});

			let _w = new HTMLWidget();
			_w.SetParent("#left");
			_w.SetContent(`<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>`, true)
			//_w.ShowPreview();

			//_w = new MarkdownWidget();
			//_w.SetParent("#left");
			//_w.ShowPreview();

			//_w = new TODOWidget();
			//_w.SetParent("#left");

			_w = new TextWidget();
			_w.SetParent("#left");
			_w.SetContent('<div>Hello world!</div>');

			_w = new ImageWidget();
			_w.SetParent("#left");
			_w.SetContent({ path: 'assets/code.jpg', caption: "caption instance", align: 0, needModify: false });

			_w = new TableWidget();
			_w.SetParent("#left");
			const _tmp = {
				columns: ['columnA', 'columnB', 'columnC'],
				titles: ['name', 'age', 'addr.'],
				rows: [
					{
						columnA: 'Jerry',
						columnB: 34,
						columnC: 'Beijing',
					}, {
						columnA: 'Nancy',
						columnB: 25,
						columnC: 'Nanjing',
					}]
			};
			_w.SetContent(JSON.stringify(_tmp));

		});

	</SCRIPT>
</HEAD>

<BODY>
	<div id="container" class="d-flex">
		<div id="left" style="width: 100%;">
		</div>
	</div>
</BODY>

</HTML>